<template>
	<view class="content">
		<view class="header">
			<image :src="setting.img" class="logo"></image>
			<text class="title">{{setting.name}}</text>
			<text class="segmentation">|</text>
			<text class="desc">{{setting.url}}</text>
		</view>
		<image :src="setting.head_img" class="banner" mode="widthFix"></image>
		<view class="box">
			<titleBox title="热门玩法" desc="点图标了解详情"></titleBox>
			<view class="hot-box">
				<view v-for="(item,index) in hotList" :key="index" class="hot-item" @click="open(item)">
					<image class="icon" :src="item.icon"></image>
					<view class="label">{{item.label}}</view>
				</view>
			</view>
		</view>
		<view class="box">
			<titleBox title="火爆游戏" desc="点图标了解详情"></titleBox>
			<view class="game-box">
				<view v-for="(item,index) in gameList" :key="index" class="game-item-box">
					<image @click="open(item)" class="game-item" :src="item.icon"></image>
					<image src="../../static/new.png" class="new" v-if="item.isNew" mode="widthFix"></image>
				</view>
			</view>
			
			

		</view>
		<view class="box">
			<titleBox title="互动功能" desc="点图标了解详情"></titleBox>
			<view class="main-box">
				<view v-for="(item,index) in mainList" :key="index" class="main-item" @click="open(item)">
					<image class="icon" :src="item.icon"></image>
					<view class="label">{{item.label}}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-heaer" @tap="close">
					<view>{{popup.label}}</view>
					<view class="close">
						<uni-icons type="closeempty" color="#ffffff" size="30"></uni-icons>
					</view>
				</view>
				<view class="popup-body">
					<view class="desc">{{popup.desc}}</view>
					<image :src="popup.infoImg" mode="widthFix" class="infoImg"></image>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>


	export default {
		data() {
			return {
				popup: {
					label: '',
					desc: '',
					infoImg: ''
				},
				hotList:[],
				gameList:[],
				mainList:[],
				gameList:[],
				setting:{
					head_img: "http://robot.frz365.run/static/robot.jpg",
					img: "http://robot.frz365.run/static/robot.jpg",
					name: "阿呆",
					url: "http://robot.frz365.run",
				}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			open(item) {
				this.popup = item
				console.log(this.popup)
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			async getInfo() {
				uni.request({
					url: 'http://robot.frz365.run/setting.json',
					success: (res) => {
						
						try{
							this.gameList =res.data.gameList
							this.hotList =res.data.hotList
							this.mainList =res.data.mainList
							this.setting =res.data.setting
						}catch(e){
							console.log(e.message)
						}
					
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		height: 90rpx;
		background-color: #2A2A2A;
		display: flex;
		align-items: center;
		color: #fff;
		padding-left: 30rpx;
		;

		.logo {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 20rpx;
			font-size: 24rpx;

		}

		.segmentation {
			margin-left: 10rpx;
			font-size: 24rpx;
		}

		.desc {
			margin-left: 10rpx;
			font-size: 22rpx;

		}
	}

	.banner {
		width: 100%;
	}

	.box {
		background: #fff;
		margin-top: 6rpx;
		width: 100%;
	}

	/*热门玩法*/
	.hot-box {
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		width: 100%;
		overflow-x: auto;

		.hot-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.label {
				font-size: 26rpx;
			}
		}
	}

	// 火爆游戏
	.game-box {
		padding: 10rpx 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;

		.game-item-box {
			position: relative;

			.game-item {
				width: 280rpx;
				height: 140rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.new {
				position: absolute;
				right: -1rpx;
				top: -10rpx;
				width: 80rpx;
			}
		}

	}

	/*互动玩法*/
	.main-box {
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;

		.main-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 25%;
			margin-bottom: 20rpx;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.label {
				font-size: 26rpx;
			}
		}
	}

	//弹出
	.popup-box {
		width: 600rpx;
		height: 800rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-sizing: border-box;

		.popup-heaer {
			height: 70rpx;
			background-color: #292928;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 10rpx;
			color: #ffda43;
			position: relative;

			.close {
				position: absolute;
				right: 15rpx;
			}
		}

		.popup-body {
			padding: 15rpx;
			box-sizing: border-box;
			width: 100%;
			height: 730rpx;
			overflow-y: auto;

			.desc {
				font-size: 26rpx;
				margin-bottom: 15rpx;
			}

			.infoImg {
				width: 100%;
			}
		}
	}
	
	
	
	
	
	

	
	
	
	
	
	
	
	
</style>